<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>对战管理</title>
    <link rel="stylesheet" type="text/css"
          th:href="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/toastr.css}">
    <script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.3.1.slim.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript"
            th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/toastr.js}"></script>

</head>
<style>
    .table {
        margin: auto;
    }

    .toast-center-center {
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -150px;
    }

    body {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    .shows {
        margin-top: 10px;
    }

    .playerImg {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #8a8a8a;
    }

    .voteTool {
        float: left;
        width: 30px;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
</style>
<body>
<div th:replace="home/index :: navbar"></div>
<div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">录入选手</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container my-5">
                        <form id="form1" action="/addPlayer" enctype="multipart/form-data">
                            <div class="form-row">

                                <div class="form-group col-12">
                                    <label for="playerImg">选手图像：</label>
                                    <input type="file" name="playerImg" id="playerImg">
                                </div>

                                <div class="form-group col-12">
                                    <label for="playerNumber">选手号码：</label>
                                    <input type="text" class="form-control"
                                           placeholder="请输入选手号码" name="playerNumber"
                                           id="playerNumber"></input>
                                </div>

                                <div class="form-group col-12">
                                    <label for="playerName">选手名称：</label>
                                    <input type="text" name="playerName" id="playerName"
                                           placeholder="请输入选手名称"
                                           class="form-control">
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-outline-primary" id="addPlayer">确认录入</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModalCenter2" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle2" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle2">录入对战</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container my-5">
                        <form id="form2" action="/addPlayer" enctype="multipart/form-data">
                            <div class="form-row">

                                <div class="form-group col-12">
                                    <label for="playeraId">请选择第一位选手</label>
                                    <select class="form-control" id="playeraId">
                                        <option th:each="noBattlePlayers:${noBattlePlayers}"
                                                th:value="${noBattlePlayers.playerId}"
                                                th:text="${noBattlePlayers.playerId}+'号--'
                                                +${noBattlePlayers.playerName}"></option>
                                    </select>
                                </div>

                                <div class="form-group col-12">
                                    <label for="playerNumber">请输入第一位选手比赛歌曲</label>
                                    <input type="text" class="form-control" placeholder="请输入歌曲"
                                           name="playeraSong"
                                           id="playeraSong"></input>
                                </div>

                                <div class="form-group col-12">
                                    <label for="playerbId">请选择第二位选手</label>
                                    <select class="form-control" id="playerbId">
                                        <option th:each="noBattlePlayers:${noBattlePlayers}"
                                                th:value="${noBattlePlayers.playerId}"
                                                th:text="${noBattlePlayers.playerId}+'号--'
                                                +${noBattlePlayers.playerName}"></option>
                                    </select>
                                </div>
                                <div class="form-group col-12">
                                    <label for="playerNumber">请输入第二位选手比赛歌曲</label>
                                    <input type="text" class="form-control" placeholder="请输入歌曲"
                                           name="playerbSong"
                                           id="playerbSong"></input>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-outline-info" id="addBattle">确认录入</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="jumbotron" style="padding-top: 150px">
        <h1 class="display-3" id="matchName" th:text="${match.matchName}"></h1>
        <p class="lead" th:text="${match.matchTime}"></p>
        <p class="lead" th:text="${match.matchAddress}"></p>
        <input id="matchId" th:value="${match.matchId}" hidden="">
    </div>
</div>

<div class="bbtn">
    <button id="b1" class="btn btn-outline-primary btn-lg" data-toggle="collapse"
            href="#multiCollapseExample1"
            role="button" aria-expanded="false"
            aria-controls="multiCollapseExample1" style="margin-left: 400px">查看选手
        <img id="b11" th:src="@{/img/查看用户.png}"
             width="30px" height="30px;"
             style="margin-bottom: 5px"></button>
    <button id="b2" type="button" class="btn  btn-outline-primary btn-lg" data-toggle="modal"
            data-target="#exampleModalCenter" style="margin-left: 233px">录入选手
        <img id="b22" th:src="@{/img/录入用户.png}"
             width="30px" height="30px;"
             style="margin-bottom: 5px"></button>
    <button id="b3" class="btn  btn-outline-info btn-lg" type="button" data-toggle="collapse"
            style="margin-left: 28px"
            data-target="#multiCollapseExample2"
            aria-expanded="false" aria-controls="multiCollapseExample2">查看对战
        <img id="b33" th:src="@{/img/查看对战.png}"
             width="30px" height="30px;"
             style="margin-bottom: 5px">
    </button>
    <button id="b4" type="button" style="margin-left:245px" class="btn  btn-outline-info btn-lg"
            data-toggle="modal" data-target="#exampleModalCenter2">录入对战
        <img id="b44" th:src="@{/img/录入对战.png}"
             width="30px" height="30px;"
             style="margin-bottom: 5px"></button>
</div>

<div class="container shows">
    <div class="row">
        <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample1">
                <div class="card card-body" th:if="${player.size()>0}">
                    <div>
                        <div class="card" th:each="player:${player}"
                             style="width: 13rem;float: left;margin-left: 25px;margin-top: 14px;">
                            <img class="card-img-top" th:src="@{${player.playerImg}}"
                                 style="width: 200px;height: 250px; " alt="Card image cap">
                            <div class="card-body">
                                <p class="card-text" th:text="${player.playerId}"></p>
                                <p class="card-text" th:text="${player.playerName}"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-body" th:if="${player.size()<=0}">
                    <p>当前比赛还没有录入选手，请先录入</p>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample2">
                <div class="card card-body" th:if="${battle.size()>0}">
                    <div th:each="battlePlayers:${battlePlayers}">
                        <div class="card"
                             style="width: 14rem;float: left;margin-left: 25px;margin-top: 14px;">
                            <a class="aa" title="查看对战详情"
                               th:href="@{/showVote(battleId=${battlePlayers.battleId})}">
                                <div class="card-body">
                                    <div class="media">
                                        <div class="media-body">
                                            <h6 th:text="${battlePlayers.playeraNumber}+'号-'
                                            +${battlePlayers.playeraName}"
                                                class="mt-0 mb-1"></h6>
                                            <p th:text="${battlePlayers.playeraSong}"></p>
                                            <div class="progress">
                                                <div class="progress-bar bg-info"
                                                     th:Style="'width: '+${battlePlayers.playeraTicket}+'%'"
                                                     role="progressbar" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                                <p th:text="${battlePlayers.playeraTicket}" style=""></p>
                                            </div>
                                        </div>
                                        <img class="ml-3 playerImg" th:src="@{${battlePlayers.playeraImg}}" alt="">
                                    </div>
                                </div>
                            </a>


                        </div>

                        <div class="voteTool">
                            <a title="查看对战详情" th:href="@{/showVote(battleId=${battlePlayers.battleId})}">
                                <img th:src="@{/img/vs.png}"
                                     style="width: 20px;height: 20px;">
                            </a>
                            <a href="#" id="beginVote" th:unless="${battlePlayers.battleStatus}==3"
                               th:onclick="'javascript:begin(' + ${battlePlayers.battleStatus} + ','
                               + ${battlePlayers.battleId} + ');'">
                                <img class="beginVote"
                                     th:src="(${battlePlayers.battleStatus}==1)?@{/img/stop.png}
                                     :@{/img/begin.png}"
                                     style="width: 20px;height: 20px;"
                                     th:title="(${battlePlayers.battleStatus}==1)?'暂停投票':'开启投票'">
                            </a>
                            <a href="#" id="endVote" th:unless="${battlePlayers.battleStatus}==3"
                               th:onclick="'javascript:end(' + ${battlePlayers.battleStatus} + ','
                                + ${battlePlayers.battleId} + ');'">
                                <img th:src="@{/img/endvote.png}"
                                     style="width: 20px;height: 20px;" title="结束投票">
                            </a>
                        </div>

                        <div class="card"
                             style="width: 13rem;margin-left: 45px;margin-top: 14px;">
                            <a title="查看对战详情" th:href="@{/showVote(battleId=${battlePlayers.battleId})}">
                                <div class="card-body">
                                    <div class="media">
                                        <img class="mr-3 playerImg" th:src="@{${battlePlayers.playerbImg}}"
                                             alt="">
                                        <div class="media-body">
                                            <h6 th:text="${battlePlayers.playerbNumber}+'-'
                                            +${battlePlayers.playerbName}"></h6>
                                            <p id="song" th:text="${battlePlayers.playerbSong}"></p>
                                            <div class="progress">
                                                <div class="progress-bar bg-danger"
                                                     th:Style="'width: '+${battlePlayers.playerbTicket}+'%'"
                                                     role="progressbar" aria-valuemin="0"
                                                     aria-valuemax="100"></div>
                                                <p th:text="${battlePlayers.playerbTicket}" style=""></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
                <div class="card card-body" th:if="${battle.size()<=0}">
                    <p>当前比赛还没有录入对战，请先录入</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        toastr.options = {
            closeButton: false,
            debug: false,
            progressBar: true,
            positionClass: "toast-center-center",
            onclick: null,
            showDuration: "300",
            hideDuration: "1000",
            timeOut: "2000",
            extendedTimeOut: "1000",
            showEasing: "swing",
            hideEasing: "linear",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        };

        $('#addPlayer').click(function () {
            if (document.getElementById('playerImg').files[0] == null) {
                toastr.error('请选择图片文件');
                return false;
            }
            if ($('#playerNumber').val().length == 0) {
                toastr.error('请输入选手号码');
                return false;
            }
            if ($('#playerName').val().length == 0) {
                toastr.error('请输入选手姓名');
                return false;
            }
            if (parseFloat($('#playerNumber').val()).toString() == "NaN") {
                toastr.error('请输入正确选手号码');
                return false;
            }
            var formData = new FormData();
            formData.append('playerImg', document.getElementById('playerImg').files[0]);
            formData.append('playerNumber', $('#playerNumber').val());
            formData.append('playerName', $('#playerName').val());
            formData.append('matchId', $('#matchId').val());

            $.ajax({
                url: '/addPlayer',
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: formData,
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('录入选手成功');
                        $('#exampleModalCenter').modal('hide');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('录入选手失败');
                        $('#exampleModalCenter').modal('hide')
                    }
                }
            })
        })

        $('#addBattle').click(function () {
            if ($('#playeraSong').val().length == 0) {
                toastr.error('歌曲不能为空');
                return false;
            }
            if ($('#playerbSong').val().length == 0) {
                toastr.error('歌曲不能为空');
                return false;
            }
            if ($('#playeraId').val() == $('#playerbId').val()) {
                toastr.error('不能选择相同选手对战');
                return false;
            }
            $.ajax({
                url: '/addBattle',
                type: 'POST',
                dataType: 'json',
                data: {
                    "playeraId": $('#playeraId').val(),
                    "playeraSong": $('#playeraSong').val(),
                    "playerbId": $('#playerbId').val(),
                    "playerbSong": $('#playerbSong').val(),
                    "matchId": $('#matchId').val()
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('录入对战成功');
                        $('#exampleModalCenter').modal('hide');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('录入对战失败');
                        $('#exampleModalCenter').modal('hide')
                    }
                }
            })
        })

        $("#b1").hover(function () {
            $("#b11").css("content", "url(\"/img/查看用户2.png\")");
        }, function () {
            $("#b11").css("content", "url(\"/img/查看用户.png\")");
        });

        $("#b2").hover(function () {
            $("#b22").css("content", "url(\"/img/录入用户2.png\")");
        }, function () {
            $("#b22").css("content", "url(\"/img/录入用户.png\")");
        });

        $("#b3").hover(function () {
            $("#b33").css("content", "url(\"/img/查看对战2.png\")");
        }, function () {
            $("#b33").css("content", "url(\"/img/查看对战.png\")");
        });

        $("#b4").hover(function () {
            $("#b44").css("content", "url(\"/img/录入对战2.png\")");
        }, function () {
            $("#b44").css("content", "url(\"/img/录入对战.png\")");
        });
    });
</script>
<script th:inline="javascript">
    function begin(status, battleId) {
        if (status == 3) {
            toastr.warning('该对战投票已结束');
            return;
        }
        if (status == 0 || status == 2) {
            $.ajax({
                url: '/beginBattle',
                type: 'POST',
                dataType: 'json',
                data: {
                    "battleId": battleId,
                    "battleStatus": 1,
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('开启投票成功');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('开启投票失败');
                        window.setTimeout("window.location.reload()", 1000);
                    }
                }
            })
        }
        if (status == 1) {
            $.ajax({
                url: '/stopBattle',
                type: 'POST',
                dataType: 'json',
                data: {
                    "battleId": battleId,
                    "battleStatus": 2,
                },
                success: function (res) {
                    if (res.code == 0) {
                        toastr.success('暂停投票成功');
                        window.setTimeout("window.location.reload()", 1000);
                    } else {
                        toastr.error('暂停投票失败');
                        window.setTimeout("window.location.reload()", 1000);
                    }
                }
            })
        }

    }

    function end(status, battleId) {
        if (status == 0) {
            toastr.warning('该对战还未开始投票,请勿结束');
            return;
        }
        if (status == 3) {
            toastr.error('该对战已结束投票,请勿重复结束');
            return;
        }
        $.ajax({
            url: '/endBattle',
            type: 'POST',
            dataType: 'json',
            data: {
                "battleId": battleId,
                "battleStatus": 3,
            },
            success: function (res) {
                if (res.code == 0) {
                    toastr.success('停止投票成功');
                    window.setTimeout("window.location.reload()", 1000);
                } else {
                    toastr.error('停止投票失败');
                    window.setTimeout("window.location.reload()", 1000);
                }
            }
        })
    }
</script>
</html>